<template>
    <view class="content">
		<view class="toper">
			<image src="../../static/page/top2.png" mode="widthFix" class="clase-top"></image>
			
			<view class="center">
				<image src="../../static/page/top3.png" mode="widthFix" class="index-top"></image>
			</view>
		</view>
		
		<view class="bottom">
			<view class="record">
				<view class="msg-list">
					<view class="person" v-for="(li, index) in personlist" :key="index">
						<image :src="li.pay_info.avatar" mode="widthFix" class='per-img'></image>
						<view class="per-name">{{li.pay_info.nickname}}</view>
						<view class="per-time">{{li.pay_info.create_at}}</view>
					</view>
					
					<view class="" @tap='loding'>
						<uni-load-more :loadingType="loadingType" :contentText="contentText" color="#F76671"></uni-load-more>
					</view>
				</view>
				
			</view>
		</view>
		
		<image src="../../static/page/page.png" mode="" class="back_img"></image>
    </view>
</template>

<script>
	import service from '../../service.js';
	import mIcon from '@/components/m-icon/m-icon.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';

	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			uniLoadMore,
			mIcon
        },
		data() {
			return {
				loadingType: 0,
				contentText: uni.getStorageSync('content'),
				isHistoryLoading:false,
				scrollAnimation:false,
				personlist:[],
				pages:1,
				page:0,
				psize:4,
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.index
			});
			uni.setStorageSync('type',1);
			this.contentText.contentdown = this.i18n.tabbar.cilck;
			this.loadHistory();
		},
		methods:{
			loding(){
				if(this.loadingType == 1){
					this.loadHistory();
				}
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				if(this.isHistoryLoading){
					return ;
				}
				if(this.page < this.pages){
					this.loadingType = 1;
					var keywords = this.keywords;
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					//本地模拟请求历史记录效果
					var page = this.page+1;
					var psize = this.psize;
					service.auth(this, service.api.main.index, {
						page: page,
						psize: psize,
					}, function(self, res) {
						if(res.info > 0){
							var list = res.data;
							for(let i=0;i<list.length;i++){
								//将数据逐条写入数组
								self.personlist.push(list[i]);
							}
							self.scrollAnimation = true;//恢复滚动动画
							self.isHistoryLoading = false;
							var pages = Math.ceil(res.info / psize);
							if(pages == 0){
								self.loadingType = 3;
							}else if(pages == 1 || pages == page){
								self.loadingType = 2;
							}else{
								self.loadingType = 0;
							}
							self.pages = pages;
							self.page = page;
						}else{
							self.loadingType = 2;
						}
					});
				}else{
					this.loadingType = 2;
				}
			},
		}
    }
</script>

<style>
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.toper{
		z-index: 30;
		width: 100%;
		position: fixed;
	}
	.clase-top{
		z-index: 40;
		position: relative;
		width: 100%;
		height: 320upx;
		/* #ifndef H5 */
		height: 350upx;
		/* #endif */
	}
	.index-top{
		width: 100%;
		z-index: 50;
		height: 350upx;
		position: relative;
		margin-top: -200upx;
	}
	.back_img{
		margin: 0;
	}
	.bottom{
		z-index: 40;
		margin: 0 40upx;
		margin-top: 500upx;
		/* #ifndef H5 */
		margin-top: 100upx;
		/* #endif */
		width: calc(100% - 80upx);
	}
	.msg-list{
		margin: 0;
		padding: 0;
		height: 100%;
	}
	
	.record {
		position: absolute;
		display: flex;
	    flex-wrap: wrap;
		flex-direction: row;
		display: inline-flex;
		width: calc(100% - 80upx);
		height: calc(100% - 500upx);
	}
	.person{
		display: flex;
		height: 70upx;
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 70upx;
		border-radius: 35upx;
		margin: 0 60upx 20upx;
		background: linear-gradient(left, #41a1f7, #64d2f1);
	}
	.per-img{
		width: 66upx;
		height: 66upx;
		border-radius: 30upx;
		border: 2upx solid #FFFFFF;
	}
	.per-name{
		text-indent: 20upx;
		width: caLc(50% - 60upx);
	}
	.per-time{
		text-align: right;
		margin-right: 20upx;
		width: caLc(50% - 20upx);
	}
	.btn-img{
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}
</style>
